<template>
  <div class="date-container">
    <div class="table-bg"></div>
    <el-form class="form" :model="ruleForm" :rules="rules" label-width="100px" ref="formRef">
      <el-form-item label="作战时间">
        <el-date-picker type="datetime" value-format="timestamp" v-model="ruleForm.fightZeroTime"></el-date-picker>
      </el-form-item>
      <el-form-item label="零时时刻">
        <el-date-picker type="datetime" value-format="timestamp" v-model="ruleForm.zeroHour"></el-date-picker>
      </el-form-item>
      <el-form-item label>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { drillDetailAPI } from "@/api";
export default {
  data() {
    return {
      ruleForm: {
        fightZeroTime: "",
        zeroHour: "",
      },
      rules: {
        fightZeroTime: [{ required: true, message: "作战时间不能为空" }],
        zeroHour: [{ required: true, message: "零时时刻不能为空" }],
      },
    };
  },
  created() {
    drillDetailAPI.getDate().then((res) => {
      this.ruleForm.fightZeroTime = res.fightZeroTime;
      this.ruleForm.zeroHour = res.zeroHour;
    });
  },
  methods: {
    handleSave() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          drillDetailAPI.setDate(this.ruleForm);
        }
      });
    },
  },
};
</script>

<style lang="less">
.date-container {
  width: 100%;
  height: 100%;
  position: relative;
  .form {
    width: 300px;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
  }
}
</style>